    html    { height: 100% }
    body    { color:#ddd;   margin: 0;   padding: 0; font-size:100%; background-color:#333; letter-spacing:-0.1em;}
    *     {  }
    
    h1 { text-shadow:3px 3px rgba(0,0,0,0.3); font-size:4em;  text-transform:uppercase; font-weight:bold; margin:0; padding:0;}
    h2 { text-shadow:3px 3px rgba(0,0,0,0.3); font-size:1.5em;  margin:0; padding:0; letter-spacing:0.1em; font-weight:bold; text-transform:uppercase;}
    
    h2 .show { font-family:"Permanent Marker";  margin-top:0.1em; }
    
    .fltr { float:right; }
    
    .might  { }
    .on, .me    { color:#5FAD54}
    
    .mt     { margin-top:10px; }
    .ml     { margin-top:10px; }
    .mb     { margin-bottom:10px; }
    .mr     { margin-right:10px; }
    .tac    { text-align:center; }

    .controls {   width:auto; text-align:center; display:block; margin-top:1em; margin-right:1em; margin-left:1em;  margin-bottom:0em; float:left; }
    .controls .play-button { margin:0em; border-radius:0.5em; padding:0.2em 0.5em 0.2em 0.5em; font-size:3em; background:inherit; color:#ddd; border:1px solid #777;}
    .controls .stop-button { margin:0em; border-radius:0.5em; padding:0.2em 0.5em 0.2em 0.5em; font-size:3em; background:inherit; color:#ddd; border:1px solid #777; }
    .controls .btn         { text-shadow:3px 3px rgba(0,0,0,0.3); box-shadow:3px 3px rgba(0,0,0,0.3); }
    .controls .btn:hover   { color:#fff; border-color:#fff; }

    .footer { position:absolute; width:100%; bottom:20px;text-shadow:3px 3px rgba(0,0,0,0.3);color:#999; margin-top:2em;font-size:1.5em; letter-spacing:0.01em; text-align:center;}
    .footer a { letter-spacing:0.01em; color:#999; font-weight:bold; text-decoration:none;}
    .footer a:hover {color:#fff;}
    .footer .hint {  text-shadow:2px 2px rgba(0,0,0,0.3);font-size:0.7em; margin-bottom:0.3em; }
    
    .page       { z-index:200; position:relative; padding-top:0%; width:100%; overflow:hidden; }
    .history    {  overflow:hidden; z-index:0; position:absolute;   width:100%; display:block;}
    .history .song { display:block;  z-index:0; color:#444; line-height:1.5em; white-space:nowrap; font-size:2em; letter-spacing:0.01em; text-transform:uppercase;}

    
    .history .song.row0 { font-size:6em; right:0;}
    .history .song.row1 { font-size:5.5em; opacity:0.95; }
    .history .song.row2 { font-size:5em; opacity:0.9;}
    .history .song.row3 { font-size:4.5em; opacity:0.85;}
    .history .song.row4 { font-size:4em; opacity:0.8;}
    .history .song.row5 { font-size:3.5em; opacity:0.75;}
    .history .song.row6 { font-size:3em; opacity:0.7;}
    .history .song.row7 { font-size:2.5em; opacity:0.65;}
    .history .song.row8 { font-size:2em; opacity:0.6;}
    .history .song.row9 { font-size:1.5em; opacity:0.55;}
    .history .song.row10 { font-size:1em; opacity:0.5;}

    .listener { width:auto; position:absolute; right:0.1em; top:0.1em; overflow:hidden; text-shadow:3px 3px rgba(0,0,0,0.3); color:#999; font-size:5em; letter-spacing:0.01em; line-height:1em; text-align:left;  }
    .listener .me { }
    
    .page .head { width:auto;  overflow:hidden; margin:2em;}
    
    .transcoder-controls { margin-top:3em; text-align:center; width:100%; overflow:hidden;  }
    .transcoder-controls .btn {opacity:0.7; margin-left:0.9em; margin-bottom:0.5em; font-size:3em; font-weight:bold; float:left;  border-radius:0.25em; padding: 5px 20px 5px 20px; font-weight:bold;text-transform:uppercase; }
    .transcoder-controls .btn:hover { opacity:1; }
    
    .shows { margin-top:1em; text-align:center; width:100%; overflow:hidden;  }
    .shows .show { margin-left:0.5em; margin-bottom:0.5em; font-size:5em; font-weight:bold; text-transform:uppercase; float:left; }
    .shows .show .btn {opacity:0.7; border-radius:0.25em; padding: 10px 30px 10px 30px; font-size:1em; font-weight:bold;text-transform:uppercase; }
    .shows .show .btn:hover {opacity:1;}
